/* =========================================================================
 * Book a Call page.
 *
 * Loaded only on the page with the slug "book-a-call" (see
 * zouma_enqueue_assets). Section numbering matches page-book-a-call.php.
 * ====================================================================== */

/* =========================================================================
 * 01 · Hero + scheduler.
 *
 *   Section  #FFF · centred head, the scheduler on a white card over a pale
 *            cyan wash and the lattice
 *   Card     568px · 8px radius · soft shadow, no heavy border — it reads as
 *            lifted off the wash rather than boxed in
 *   Bar      hairline strip across the foot, badges centred
 * ====================================================================== */

.zouma-bkhero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Full screen on any device. Unlike the dark heroes this one sits below
	 * the sticky header rather than under it, so the header's height comes
	 * off the 100 — otherwise the page would be a header taller than the
	 * screen and open already scrolled. min-height, and svh after vh, for
	 * the same reasons as the homepage hero. */
	/* Height comes from the content, not the viewport. The padding-top below
	 * still clears the sticky header, so the copy starts in the same place;
	 * only the empty space under a short hero goes. */
	min-height: auto;
	/* The header floats over the page, so the hero starts under it. */
	padding-top: calc(var(--zouma-header-h) + clamp(2rem, calc(4.5 * var(--zouma-vw)), 4.5rem));
	background: #fff;
	overflow: hidden;
}

.zouma-bkhero__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Washes down each side rather than one behind the card: a single centred
 * ellipse would be brightest exactly where the card sits and tint the white.
 * They are weighted low and run off the bottom edge, so the colour gathers
 * beside and beneath the card and the space around the heading stays clean. */
.zouma-bkhero__glow {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 40% 48% at 4% 76%, rgba(43, 174, 228, 0.26) 0%, rgba(43, 174, 228, 0) 72%),
		radial-gradient(ellipse 40% 48% at 96% 70%, rgba(43, 174, 228, 0.24) 0%, rgba(43, 174, 228, 0) 72%),
		radial-gradient(ellipse 52% 24% at 50% 0%, rgba(173, 219, 243, 0.22) 0%, rgba(173, 219, 243, 0) 74%);
}

.zouma-bkhero__dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(14, 133, 182, 0.055) 1.1px, transparent 1.3px);
	background-size: 30px 30px;
	/* Faded out behind the card so the lattice never reads through it. */
	mask-image: radial-gradient(ellipse 44% 54% at 50% 64%, transparent 42%, #000 80%);
	-webkit-mask-image: radial-gradient(ellipse 44% 54% at 50% 64%, transparent 42%, #000 80%);
}

/* Copy left, scheduler right — the pair the design shows. It was a centred
 * column, which stacked the calendar under the heading and pushed the badge
 * bar most of a screen down the page.
 *
 * The card column is sized to the card rather than a fraction, so the copy
 * takes whatever is left and the scheduler keeps the width it was drawn at.
 * Centred on the cross axis because the card is the taller of the two and the
 * head reads as sitting against the middle of it. */
.zouma-bkhero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 568px);
	gap: clamp(2rem, calc(4 * var(--zouma-vw)), 4.5rem);
	align-items: center;
	text-align: left;
	/* Clears the badge bar below. The section has a padding-top but no
	 * padding-bottom, so before the two-column change this gap was coming from
	 * the card's own margin — which the grid no longer needs and which was
	 * removed with it, leaving the card sitting on the bar's rule. The space
	 * belongs here rather than back on the card: it is the distance between
	 * the hero's content and the strip, whichever column happens to be taller. */
	margin-bottom: clamp(2.5rem, calc(5 * var(--zouma-vw)), 4rem);
}

.zouma-bkhero__copy {
	min-width: 0;
}

.zouma-bkhero__title {
	max-width: 16ch;
	margin: 0;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.875rem, 1.1rem + calc(2.6 * var(--zouma-vw)), 3rem);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.02em;
}

/* Wide enough to break in two, as the design does — at a narrower measure the
 * sentence falls onto a third line and the head stops reading as a pair. */
.zouma-bkhero__text {
	max-width: 34rem;
	margin: 18px 0 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.875rem;
	line-height: 1.7;
}

.zouma-bkhero__card {
	width: 100%;
	max-width: 568px;
	/* No vertical margin: the grid places it now, and the section's own
	 * padding carries the space above and below. */
	margin: 0;
	padding: clamp(1.5rem, calc(2.4 * var(--zouma-vw)), 1.875rem);
	background: #fff;
	border: 1px solid rgba(18, 18, 18, 0.06);
	border-radius: 8px;
	box-shadow: 0 18px 44px rgba(6, 42, 66, 0.09);
	text-align: left;
}

.zouma-bkhero__card-title {
	margin: 0 0 20px;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
}

/* The calendar is shared with the footer, where it sits on teal. On this card
 * it is the same markup on white, so only the colours are restated — the
 * geometry stays in main.css and is not duplicated here. */
.zouma-bkhero__card .zouma-cal {
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.zouma-bkhero__card .zouma-cal__month {
	color: var(--zouma-color-text);
}

.zouma-bkhero__card .zouma-cal__day {
	color: var(--zouma-color-text);
}

.zouma-bkhero__card .zouma-cal__day.is-muted {
	color: rgba(18, 18, 18, 0.28);
}

.zouma-bkhero__card .zouma-cal__day.is-open {
	border-color: var(--zouma-cyan);
	color: var(--zouma-blue);
}

/* The number, on the blue fill hovering a date paints in.
 *
 * main.css already turns it white on hover, but that rule is
 * button.zouma-cal__day:hover - two classes' worth of weight against the three
 * of the ringed rule above, which therefore kept the number blue on a blue
 * circle and read as the date disappearing under the pointer. Naming the
 * element here outweighs it. Only the colour: the fill, the ring and the
 * geometry all still come from the rules that already own them. */
.zouma-bkhero__card button.zouma-cal__day:hover,
.zouma-bkhero__card button.zouma-cal__day:focus-visible {
	color: #fff;
}

.zouma-bkhero__card .zouma-cal__zone {
	padding-top: 14px;
	border-top: 1px solid rgba(18, 18, 18, 0.08);
	color: var(--zouma-color-muted);
}

.zouma-bkhero__card .zouma-cal__cta {
	color: var(--zouma-blue);
}

/* Calendly sets its own height; give it something sensible to fill. */
.zouma-bkhero__card .zouma-booking__calendly,
.zouma-bkhero__card .zouma-booking__frame {
	height: auto;
	min-height: 640px;
}

.zouma-bkhero__bar {
	position: relative;
	border-top: 1px solid var(--zouma-color-border);
	border-bottom: 1px solid var(--zouma-color-border);
}

.zouma-bkhero__bar ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(12px, calc(2.6 * var(--zouma-vw)), 40px);
	padding-block: 14px;
	list-style: none;
}

.zouma-bkhero__bar li {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-body);
	font-size: 0.8125rem;
	font-weight: 400;
	white-space: nowrap;
}

/* A plain bullet, as on the homepage info bar and the About and Careers
 * heroes. --zouma-cyan rather than the soft tint those use: this strip sits on
 * a light ground, where the lighter tone washes out. */
.zouma-bkhero__dot {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	background: var(--zouma-cyan);
	border-radius: 50%;
}

/* =========================================================================
 * 02 · What to expect.
 *
 *   Section  #E1EDF9 · centred head over one bordered block split into three
 *            by hairlines — the same device as the Careers benefits row, and
 *            for the same reason: the design draws one frame, not three cards
 * ====================================================================== */

/* Opted out of the site-wide full-screen floor (see `main > section` in
 * main.css), as .zouma-bktrust below already is. Both properties are needed:
 * min-height undoes the floor, display undoes the centring grid that came with
 * it — grid items do not collapse their margins the way block children do, so
 * leaving the grid in place changes the spacing inside the band. */
.zouma-bkexpect {
	min-height: auto;
	display: block;
}

.zouma-bkexpect {
	padding-block: clamp(3rem, calc(6 * var(--zouma-vw)), 5.5rem);
	background: var(--zouma-blue-pale);
}

.zouma-bkexpect__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 640px;
	margin: 0 auto clamp(1.75rem, calc(3.5 * var(--zouma-vw)), 2.75rem);
	text-align: center;
}

.zouma-bkexpect .zouma-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.333;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.zouma-bkexpect .zouma-eyebrow .zouma-icon--spark {
	color: var(--zouma-cyan);
}

.zouma-bkexpect__title {
	margin: 0;
	color: var(--zouma-color-text);
	font-family: var(--zouma-font-heading);
	font-size: clamp(1.5rem, 1rem + calc(1.6 * var(--zouma-vw)), 2.25rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.zouma-bkexpect__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	border: 1px solid rgba(14, 133, 182, 0.18);
	list-style: none;
}

.zouma-bkexpect__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: clamp(1.75rem, calc(3 * var(--zouma-vw)), 2.5rem) clamp(1.25rem, calc(2.4 * var(--zouma-vw)), 2.25rem);
	text-align: center;
}

/* Hairlines between cells, never on the outside — the block's own border
 * already draws that edge, and doubling them thickens the frame. */
.zouma-bkexpect__card + .zouma-bkexpect__card {
	border-left: 1px solid rgba(14, 133, 182, 0.18);
}

.zouma-bkexpect__icon {
	display: grid;
	place-items: center;
	margin-bottom: 8px;
	color: var(--zouma-cyan);
}

/* An uploaded image takes the same box the icon draws into, so swapping one for
 * the other never moves the title beneath it. contain, so a wide or tall logo
 * fits whole rather than being cropped to the square. */
.zouma-bkexpect__icon img {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.zouma-bkexpect__name {
	margin: 0;
	color: var(--zouma-blue);
	font-family: var(--zouma-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
}

.zouma-bkexpect__copy {
	max-width: 34ch;
	margin: 0;
	color: var(--zouma-color-muted);
	font-family: var(--zouma-font-body);
	font-size: 0.75rem;
	line-height: 1.6;
}

/* =========================================================================
 * 03 · Trusted by.
 *
 *   Section  #FFF · caption over two centred rows of logos, knocked back to
 *            grey so no single brand shouts
 * ====================================================================== */

/* Opted out of the "main > section" full-screen floor: the caption and two
 * logo rows come to roughly a third of a screen, and the floor was padding the
 * rest out with empty white. Height follows the content. */
/* The rail is the homepage's, markup and classes both, so everything that
 * describes it — the cards, the logo treatments, the end fades, the scroll and
 * its speed — is already stated once in main.css and is not restated here.
 * What follows is only what differs because this section stands alone.
 *
 * Opted out of the "main > section" full-screen floor: a caption over one row
 * of cards is about a third of a screen, and the floor was padding the rest
 * out with empty white. Height follows the content. */
.zouma-bktrust {
	min-height: auto;
	display: block;
	padding-block: clamp(3rem, calc(6 * var(--zouma-vw)), 5.5rem);
	/* The foot belongs to the marquee window, which carries 28px of its own.
	 * A second gap here would stack on top of it. */
	padding-bottom: 0;
	/* The ground the cards are drawn for. Their fill is white at 72% and their
	 * border a 20% ink, which on a white section leaves the fill invisible and
	 * the hairline doing all the work — the cards need the band to sit on.
	 * Same near-white and same 28px dot pitch as the homepage. */
	background-color: #f7fafc;
	background-image: radial-gradient(circle, rgba(11, 74, 108, 0.07) 1.5px, transparent 1.5px);
	background-size: 28px 28px;
	text-align: center;
}

/* On the homepage the rail is the second row of a two-row band and is pushed
 * down away from the copy above it. Here it is the only thing in the section,
 * so that top margin would only add to the section's own padding. */
.zouma-bktrust .zouma-trust {
	margin-top: 0;
}

/* The static variant of the trust rail.
 *
 * The shared component in main.css is a marquee: a clipped window, a track
 * that animates sideways, and a nowrap row whose logos each sit in their own
 * bordered card. The design for this page is none of that — one block of plain
 * marks, centred, wrapping onto a second line. Every rule below switches off
 * one piece of the marquee rather than duplicating the component, so the
 * homepage rail is untouched. */

.zouma-trust--static .zouma-trust__viewport {
	/* No window to clip against, so no fade at the ends either — the fade only
	 * exists to soften a cut that no longer happens. */
	padding-bottom: 0;
	overflow: visible;
	-webkit-mask-image: none;
	mask-image: none;
}

.zouma-trust--static .zouma-trust__track {
	display: block;
	width: auto;
	animation: none;
}

.zouma-trust--static .zouma-trust__row {
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.5rem, calc(3.4 * var(--zouma-vw)), 2.75rem) clamp(1.5rem, calc(3.1 * var(--zouma-vw)), 2.75rem);
	/* 1000, not the full column: the fifteen marks then break 8 over 7, which
	 * is the split the design shows. Wider and the first line takes ten and
	 * leaves five stranded; much narrower and a third line starts. */
	max-width: 1000px;
	margin-inline: auto;
	padding-inline-end: 0;
}

/* Plain marks, not cards: no plate, no rule, and a width that follows the logo
 * rather than a fixed card. The height stays so every mark sits on one line. */
/* A common box, no card. Each mark is fitted into the same 100x32 rather than
 * drawn at whatever size its own file happens to be — left to themselves the
 * square marks (DCC, the ECO lockup) came out half the height of the wordmarks
 * beside them. contain, so nothing is cropped or stretched to get there. */
.zouma-trust--static .zouma-trust__row li {
	width: 80px;
	height: 26px;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

/* The marks themselves.
 *
 * The shared rule sizes them as a share of the card they sit in (68% x 60%).
 * With the card gone that resolved against a 34px box and capped every logo at
 * 20px tall, which is why they read as small. Sized in absolute terms here,
 * and set darker: the shared weights were chosen for a tinted panel, and on
 * white they look washed out. */
.zouma-trust--static .zouma-trust__row img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: contain;
	/* Darker than the marquee's 0.58. That weight was picked for a tinted panel
	 * with translucent cards over it; on plain white it reads washed out. */
	opacity: 0.85;
}

.zouma-trust--static .zouma-trust__row img.is-vector {
	opacity: 0.8;
}

/* Unused as it stands - zouma_faint_logos() is empty since incorporatewear
 * became a vector. Kept with the rest of that mechanism, so a raster added to
 * the list reads at the same weight here as it does on the marquee. */
.zouma-trust--static .zouma-trust__row img.is-faint-art {
	opacity: 0.95;
}

/* Sentence case on white, as the reference sets it: a plain line of copy
 * rather than the tracked-out label the marquee uses. */
.zouma-trust--static .zouma-trust__title {
	color: var(--zouma-color-text);
	font-size: clamp(0.875rem, 0.82rem + calc(0.22 * var(--zouma-vw)), 1rem);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

/* White, with no dot field: the marks sit on the page rather than on a band of
 * their own. The pattern and tint exist to give the marquee's translucent
 * cards something to sit on, and there are no cards here. */
.zouma-bktrust:has(.zouma-trust--static) {
	background-color: #fff;
	background-image: none;
	/* The section sets padding-bottom: 0 because the marquee window carries its
	 * own 32px foot. The static variant has no window and no foot, so the last
	 * row of marks sat directly on the footer above the fold below. Matching
	 * the top padding puts the band back in balance. */
	padding-bottom: clamp(3rem, calc(6 * var(--zouma-vw)), 5.5rem);
}

/* =========================================================================
 * Responsive.
 * ====================================================================== */

@media (max-width: 960px) {
	/* Below this the two columns would each be too narrow to read, so the
	 * head goes back over the scheduler and both centre. */
	.zouma-bkhero__inner {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		text-align: center;
	}

	.zouma-bkhero__copy {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.zouma-bkhero__title,
	.zouma-bkhero__text {
		max-width: 40rem;
	}
}

@media (max-width: 860px) {
	.zouma-bkexpect__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.zouma-bkexpect__card + .zouma-bkexpect__card {
		border-left: 0;
		border-top: 1px solid rgba(14, 133, 182, 0.18);
	}
}

@media (max-width: 560px) {
	.zouma-bkhero__dots {
		mask-image: none;
		-webkit-mask-image: none;
		opacity: 0.5;
	}

	.zouma-bkhero__card {
		padding: 1.25rem;
	}

	.zouma-bkhero__bar ul {
		gap: 10px 20px;
	}

}