/**
 * Rehalz Corporate — components, block styles and responsive rules.
 *
 * Design tokens (colour, type scale, spacing, shadows, radii) live in
 * theme.json and arrive here as `--wp--preset--*` and `--wp--custom--*`
 * custom properties. This file holds the things theme.json cannot express:
 * component internals, block style variations and media queries.
 *
 * Breakpoint tiers
 *   mobile    …599px      single column, 16px gutters
 *   tablet    600–1023px  two-up grids, columns still stacked
 *   desktop   1024–1599px full multi-column layouts
 *   large     1600px+     wider measure, larger gutters
 *
 * Contents
 *   1.  Primitives and helpers
 *   2.  Icons
 *   3.  Header and navigation
 *   4.  Footer
 *   5.  Sections and hero
 *   6.  Block styles — surfaces
 *   7.  Block styles — typography
 *   8.  Block styles — buttons
 *   9.  Block styles — lists, separators, pills
 *   10. Block styles — media
 *   11. Cards: services, cases, team, quotes
 *   12. Pricing
 *   13. FAQ and details
 *   14. Tables
 *   15. Contact form
 *   16. Motion: reveal, stagger, counters
 *   17. Responsive tiers
 *   18. Reduced motion, forced colours, print
 */

/* ------------------------------------------------------------------ *
 * 1. Primitives and helpers
 * ------------------------------------------------------------------ */

/*
 * Stop single-side borders drawing a box.
 *
 * WordPress adds `.has-border-color` as soon as ANY border side has a colour,
 * and block-library then applies `border-style: solid` to all four sides:
 *
 *   html :where(.has-border-color) { border-style: solid }
 *
 * A block that styles only one side — the header's bottom rule, the footer's
 * top rule, the "Trusted by teams at" divider — therefore picks up the
 * browser's default `medium` width in `currentColor` on the other three,
 * which renders as a heavy dark rectangle.
 *
 * Defaulting the width to zero fixes it without touching anything else: the
 * selector has zero specificity, so a real border-width (inline from a
 * per-side setting, or from theme.json) always wins.
 */
:where(.has-border-color) {
	border-width: 0;
}

:root {
	--rz-gutter: clamp(1rem, 5vw, 4rem);
	--rz-ring: 0 0 0 1px var(--wp--preset--color--line);
	--rz-ring-dark: 0 0 0 1px rgb(255 255 255 / 14%);
	--rz-dark-surface: rgb(255 255 255 / 6%);
	--rz-dark-surface-strong: rgb(255 255 255 / 10%);

	/*
	 * Frosted glass, derived from the palette.
	 *
	 * Applying a style variation only carries the colour presets through to the
	 * user's global styles — WordPress strips settings.custom and styles.css on
	 * save. So every frosted value here is computed from `base`, `contrast`,
	 * `surface` and `accent` with color-mix(), which means the whole layer
	 * inverts by itself for a dark variation, and keeps working if the client
	 * edits the palette in the Site Editor. No mode detection anywhere.
	 *
	 * The repeated trick is mixing toward white: in a light palette `base` is
	 * already white so it is a no-op, while in a dark palette it lifts the
	 * surface off the page. One formula, correct in both.
	 */
	--rz-glass-blur: saturate(180%) blur(20px);
	--rz-glass-blur-soft: saturate(150%) blur(12px);

	/* An opaque surface one step lighter than the page, in either scheme. */
	--rz-surface-lift: color-mix(in srgb, var(--wp--preset--color--base) 92%, #fff);

	--rz-glass: color-mix(in srgb, var(--rz-surface-lift) 74%, transparent);
	--rz-glass-strong: color-mix(in srgb, var(--rz-surface-lift) 88%, transparent);
	--rz-glass-thin: color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent);
	--rz-glass-panel: color-mix(in srgb, var(--wp--preset--color--surface) 72%, transparent);
	--rz-glass-overlay: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
	--rz-glass-submenu: color-mix(in srgb, var(--rz-surface-lift) 92%, transparent);

	/* Hairlines and highlights follow the text colour, so they invert too. */
	--rz-glass-hairline: color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	--rz-glass-edge: color-mix(in srgb, var(--wp--preset--color--base) 55%, #fff);
	--rz-glass-inset: var(--rz-glass-edge);
	--rz-hover-tint: color-mix(in srgb, var(--wp--preset--color--contrast) 7%, transparent);

	/* Shadows stay black in both schemes — a contrast-tinted shadow would turn
	   into a glow on a dark palette. Separation in dark mode comes mostly from
	   the hairline and the lifted fill. */
	--rz-glass-shadow: 0 1px 2px rgb(0 0 0 / 5%), 0 16px 40px -24px rgb(0 0 0 / 35%);
	--rz-glass-shadow-lift: 0 2px 4px rgb(0 0 0 / 7%), 0 28px 56px -28px rgb(0 0 0 / 48%);

	--rz-header-bar: color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent);
	--rz-header-scrolled: color-mix(in srgb, var(--wp--preset--color--base) 84%, transparent);
	--rz-header-sheen: var(--rz-glass-edge);

	--rz-tint-soft: color-mix(in srgb, var(--wp--preset--color--accent-3) 80%, transparent);
	--rz-tint-ring: color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent);
	--rz-switch-track: color-mix(in srgb, var(--wp--preset--color--muted) 72%, transparent);
	--rz-control-inset: inset 0 1px 2px color-mix(in srgb, var(--wp--preset--color--contrast) 5%, transparent);

	/* The floating button inverts: dark pill on a light page, light on dark. */
	--rz-float-bg: color-mix(in srgb, var(--wp--preset--color--contrast) 88%, transparent);
	--rz-float-fg: var(--wp--preset--color--base);

	--rz-featured-bg: color-mix(in srgb, var(--wp--preset--color--accent) 7%, var(--rz-glass-strong));
	--rz-featured-ring: color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
	--rz-featured-glow: 0 28px 60px -28px color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);

	/*
	 * Surfaces on an explicitly dark band. These are keyed off `base` rather
	 * than white, because a dark variation flips those bands to light — the
	 * footer becomes a pale band and these have to invert with it.
	 */
	--rz-glass-on-dark: color-mix(in srgb, var(--wp--preset--color--base) 8%, transparent);
	--rz-glass-on-dark-strong: color-mix(in srgb, var(--wp--preset--color--base) 13%, transparent);
	--rz-glass-edge-dark: color-mix(in srgb, var(--wp--preset--color--base) 18%, transparent);

	/* Ambient colour that gives the glass something to refract */
	--rz-aurora-1: color-mix(in srgb, var(--wp--preset--color--accent-2) 16%, transparent);
	--rz-aurora-2: color-mix(in srgb, var(--wp--preset--color--accent) 15%, transparent);
	--rz-aurora-3: color-mix(in srgb, var(--wp--preset--color--accent-2) 12%, transparent);
	--rz-aurora-dark-1: color-mix(in srgb, var(--wp--preset--color--accent-2) 20%, transparent);
	--rz-aurora-dark-2: color-mix(in srgb, var(--wp--preset--color--accent) 26%, transparent);

	/* Semantic feedback colours, tinted against whatever the page colour is. */
	--rz-ok: #10b981;
	--rz-bad: #ef4444;
	--rz-warn: #f59e0b;
	--rz-ok-bg: color-mix(in srgb, var(--rz-ok) 14%, var(--wp--preset--color--base));
	--rz-ok-ring: color-mix(in srgb, var(--rz-ok) 38%, var(--wp--preset--color--base));
	--rz-ok-fg: color-mix(in srgb, var(--rz-ok) 55%, var(--wp--preset--color--contrast));
	--rz-bad-bg: color-mix(in srgb, var(--rz-bad) 12%, var(--wp--preset--color--base));
	--rz-bad-ring: color-mix(in srgb, var(--rz-bad) 36%, var(--wp--preset--color--base));
	--rz-bad-fg: color-mix(in srgb, var(--rz-bad) 55%, var(--wp--preset--color--contrast));
	--rz-rating: color-mix(in srgb, var(--rz-warn) 72%, var(--wp--preset--color--contrast));
}

/*
 * color-mix() is the backbone above, so very old browsers get the original
 * light-mode literals rather than an unstyled page.
 */
@supports not (color: color-mix(in srgb, red, blue)) {
	:root {
		--rz-surface-lift: #ffffff;
		--rz-glass: rgb(255 255 255 / 74%);
		--rz-glass-strong: rgb(255 255 255 / 88%);
		--rz-glass-thin: rgb(255 255 255 / 55%);
		--rz-glass-panel: rgb(248 250 252 / 72%);
		--rz-glass-overlay: rgb(248 250 252 / 92%);
		--rz-glass-submenu: rgb(255 255 255 / 92%);
		--rz-glass-hairline: rgb(15 23 42 / 10%);
		--rz-glass-edge: rgb(255 255 255 / 70%);
		--rz-hover-tint: rgb(15 23 42 / 7%);
		--rz-header-bar: rgb(255 255 255 / 55%);
		--rz-header-scrolled: rgb(255 255 255 / 84%);
		--rz-tint-soft: rgb(224 242 254 / 80%);
		--rz-tint-ring: rgb(3 105 161 / 18%);
		--rz-switch-track: rgb(232 236 241 / 72%);
		--rz-float-bg: rgb(15 23 42 / 88%);
		--rz-featured-bg: rgb(255 255 255 / 88%);
		--rz-featured-ring: rgb(3 105 161 / 55%);
		--rz-glass-on-dark: rgb(255 255 255 / 8%);
		--rz-glass-on-dark-strong: rgb(255 255 255 / 13%);
		--rz-glass-edge-dark: rgb(255 255 255 / 18%);
		--rz-ok-bg: #ecfdf5;
		--rz-ok-ring: #a7f3d0;
		--rz-ok-fg: #065f46;
		--rz-bad-bg: #fef2f2;
		--rz-bad-ring: #fecaca;
		--rz-bad-fg: #991b1b;
		--rz-rating: #c2850c;
	}
}

/*
 * Respect the system "reduce transparency" setting, and browsers without
 * backdrop-filter: both get solid surfaces instead of washed-out ones.
 */
@media (prefers-reduced-transparency: reduce) {
	:root {
		--rz-glass: var(--wp--preset--color--base);
		--rz-glass-strong: var(--wp--preset--color--base);
		--rz-glass-thin: var(--wp--preset--color--base);
		--rz-glass-panel: var(--wp--preset--color--surface);
		--rz-glass-overlay: var(--wp--preset--color--surface);
		--rz-glass-on-dark: rgb(255 255 255 / 12%);
		--rz-glass-on-dark-strong: rgb(255 255 255 / 16%);
	}
}

@supports not (backdrop-filter: blur(1px)) {
	:root {
		--rz-glass: var(--wp--preset--color--base);
		--rz-glass-strong: var(--wp--preset--color--base);
		--rz-glass-thin: rgb(255 255 255 / 92%);
	}
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--base);
	clip-path: none;
	color: var(--wp--preset--color--contrast);
	display: block;
	font-size: var(--wp--preset--font-size--small);
	height: auto;
	left: 1rem;
	line-height: normal;
	padding: 0.85rem 1.25rem;
	text-decoration: none;
	top: 1rem;
	width: auto;
	z-index: 100000;
}

/* Text link with a trailing arrow that nudges on hover. */
.rz-arrow-link,
.is-style-rz-arrow .wp-block-button__link,
.wp-block-read-more.is-style-rz-arrow {
	align-items: center;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	gap: 0.4em;
	text-decoration: none;
}

.rz-arrow-link::after,
.is-style-rz-arrow .wp-block-button__link::after,
.wp-block-read-more.is-style-rz-arrow::after {
	content: "";
	height: 0.72em;
	mask: var(--rz-arrow) center / contain no-repeat;
	-webkit-mask: var(--rz-arrow) center / contain no-repeat;
	transition: transform var(--wp--custom--transition--base);
	width: 0.95em;
	background-color: currentColor;
}

:root {
	--rz-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 8h20'/%3E%3Cpath d='m15 2 6 6-6 6'/%3E%3C/svg%3E");
}

.rz-arrow-link:hover::after,
.rz-arrow-link:focus-visible::after,
.is-style-rz-arrow .wp-block-button__link:hover::after,
.wp-block-read-more.is-style-rz-arrow:hover::after {
	transform: translateX(0.22em);
}

/* ------------------------------------------------------------------ *
 * 2. Icons
 * ------------------------------------------------------------------ */

.rz-icon {
	display: block;
	flex: none;
}

.rz-icon-badge {
	align-items: center;
	border-radius: var(--wp--custom--radius--md);
	display: inline-flex;
	flex: none;
	height: 2.75rem;
	justify-content: center;
	width: 2.75rem;
}

.rz-icon-badge.is-tint {
	-webkit-backdrop-filter: var(--rz-glass-blur-soft);
	backdrop-filter: var(--rz-glass-blur-soft);
	background-color: var(--rz-tint-soft);
	box-shadow: inset 0 1px 0 var(--rz-glass-inset),
		0 0 0 1px var(--rz-tint-ring);
	color: var(--wp--preset--color--accent);
}

.rz-icon-badge.is-solid {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.rz-icon-badge.is-outline {
	box-shadow: var(--rz-ring);
	color: var(--wp--preset--color--accent);
}

.rz-icon-badge.is-ghost {
	color: var(--wp--preset--color--contrast-3);
}

/*
 * Bands painted with a preset gradient.
 *
 * `contrast-depth` and `accent-depth` are defined with fixed hex stops, so a
 * band using one stays dark under every palette — unlike a band painted with
 * the `contrast` preset, which inverts along with the colour scheme. The text
 * on them is set with `base`, which does invert, so a dark variation left the
 * CTA strip and the dark hero with near-black text on a near-black gradient.
 *
 * These bands therefore declare their own ink. The rules underneath read it
 * with the ordinary preset as a fallback, so they change nothing anywhere
 * else, and any block a client paints with these gradients is covered too.
 */
.has-contrast-depth-gradient-background,
.has-accent-depth-gradient-background,
.wp-block-cover:has(> .wp-block-cover__background[class*="-depth-gradient-background"]) {
	--rz-fixed-ink: #f1f5f9;
	--rz-fixed-ink-muted: rgb(241 245 249 / 74%);
	--rz-fixed-ink-accent: #7dd3fc;
	--rz-fixed-ink-contrast: #0b1220;

	/* Glass on these bands is light-on-dark whatever the palette says. */
	--rz-glass-on-dark: rgb(255 255 255 / 8%);
	--rz-glass-on-dark-strong: rgb(255 255 255 / 13%);
	--rz-glass-edge-dark: rgb(255 255 255 / 18%);

	color: var(--rz-fixed-ink);
}

:root .has-base-color {
	color: var(--rz-fixed-ink, var(--wp--preset--color--base)) !important;
}

:root .has-line-color {
	color: var(--rz-fixed-ink-muted, var(--wp--preset--color--line)) !important;
}

:root .has-accent-3-color {
	color: var(--rz-fixed-ink-muted, var(--wp--preset--color--accent-3)) !important;
}

/* Headings on these bands inherit, rather than taking the global heading colour. */
.has-contrast-depth-gradient-background :is(h1, h2, h3, h4, h5, h6),
.has-accent-depth-gradient-background :is(h1, h2, h3, h4, h5, h6),
.wp-block-cover:has(> .wp-block-cover__background[class*="-depth-gradient-background"]) :is(h1, h2, h3, h4, h5, h6) {
	color: var(--rz-fixed-ink);
}

/*
 * Text on `contrast`-painted bands.
 *
 * The footer, stats row and featured quote are painted with the `contrast`
 * preset, so they flip from navy to near-white when a dark variation inverts
 * the palette — and an accent chosen to sit on a dark band then lands on a
 * light one. Re-deriving these two against the band's own text colour keeps
 * them legible whichever way round the palette is.
 *
 * !important is needed because WordPress emits its colour preset classes with
 * it; the mix is still anchored to the same presets, so the brand holds.
 */
.rz-on-dark .has-accent-2-color {
	color: var(
		--rz-fixed-ink-accent,
		color-mix(in srgb, var(--wp--preset--color--accent-2) 55%, var(--wp--preset--color--base))
	) !important;
}

.rz-on-dark .has-contrast-3-color {
	color: var(
		--rz-fixed-ink-muted,
		color-mix(in srgb, var(--wp--preset--color--base) 65%, var(--wp--preset--color--contrast))
	) !important;
}

/* On dark sections the tinted badge would glare, so it goes translucent. */
.rz-on-dark .rz-icon-badge.is-tint,
.rz-on-dark .rz-icon-badge.is-outline {
	background-color: var(--rz-dark-surface-strong);
	box-shadow: var(--rz-ring-dark);
	color: var(--wp--preset--color--accent-2);
}

/* ------------------------------------------------------------------ *
 * 3. Header and navigation
 * ------------------------------------------------------------------ */

/*
 * A frosted bar that lets the page show through.
 *
 * At rest it is almost clear so the hero reads as one surface; once the page
 * scrolls the glass thickens, the hairline sharpens and a soft shadow lifts
 * the bar off the content moving beneath it.
 */
/*
 * Stickiness lives on the template-part wrapper, not on the header group.
 *
 * WordPress only honours the editor's "sticky" position support for blocks at
 * the root of a template, so inside a template part it silently does nothing —
 * the header was never actually pinned. Even forcing `position: sticky` on the
 * group would not work, because a sticky element can only travel inside its
 * containing block, and the <header class="wp-block-template-part"> wrapper is
 * exactly as tall as the header itself.
 *
 * Making the wrapper sticky gives it the whole page to travel through. The
 * minimal header used by the landing template is deliberately excluded.
 */
.wp-site-blocks > .wp-block-template-part:has(> .rz-header:not(.is-minimal)) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

.rz-header {
	-webkit-backdrop-filter: var(--rz-glass-blur);
	backdrop-filter: var(--rz-glass-blur);
	background-color: var(--rz-header-bar);
	border-bottom-color: transparent !important;
	transition: background-color var(--wp--custom--transition--base),
		box-shadow var(--wp--custom--transition--base),
		border-color var(--wp--custom--transition--base),
		padding var(--wp--custom--transition--base);
	z-index: 100;
}

.rz-header.is-scrolled {
	background-color: var(--rz-header-scrolled);
	border-bottom-color: var(--rz-glass-hairline) !important;
	box-shadow: 0 14px 34px -26px rgb(15 23 42 / 45%);
	padding-block: 0.6rem;
}

.rz-header.rz-on-dark,
.rz-header-dark {
	background-color: rgb(15 23 42 / 55%);
}

.rz-header.rz-on-dark.is-scrolled {
	background-color: rgb(15 23 42 / 82%);
	border-bottom-color: var(--rz-glass-edge-dark) !important;
	box-shadow: 0 16px 36px -26px rgb(0 0 0 / 75%);
}

/* A hairline of light along the top edge — the thing that reads as "glass". */
.rz-header.is-scrolled::after {
	background: linear-gradient(
		90deg,
		transparent,
		var(--rz-header-sheen) 18%,
		var(--rz-header-sheen) 82%,
		transparent
	);
	content: "";
	height: 1px;
	inset-inline: 0;
	position: absolute;
	top: 0;
	pointer-events: none;
}

.rz-header.rz-on-dark.is-scrolled::after {
	background: linear-gradient(
		90deg,
		transparent,
		rgb(255 255 255 / 22%) 18%,
		rgb(255 255 255 / 22%) 82%,
		transparent
	);
}

.rz-header__bar {
	gap: var(--wp--preset--spacing--30);
}

/*
 * A brand mark is artwork we do not control: it may be dark, light or full
 * colour, and inverting it would wreck the colour. So the header gives it a
 * light plate to sit on, which reads the same under every palette. The plate
 * is invisible on a light header and does the work on a dark one.
 */
.rz-header__brand .wp-block-site-logo {
	background-color: rgb(255 255 255 / 92%);
	border-radius: var(--wp--custom--radius--sm);
	display: flex;
	line-height: 0;
	padding: 0.3rem 0.4rem;
}

.rz-header__brand .wp-block-site-logo img {
	border-radius: var(--wp--custom--radius--sm);
	display: block;
}

.rz-header__end {
	gap: var(--wp--preset--spacing--30);
}

/* Current page gets a weight and underline change, not colour alone. */
.rz-nav .wp-block-navigation-item.current-menu-item > a,
.rz-nav .wp-block-navigation-item.current-menu-ancestor > a {
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

/* Links sit in a soft pill that fades in on hover. The padding is kept tight
   so six items plus the CTA still fit on one line down to ~900px. */
.rz-nav .wp-block-navigation-item__content {
	border-radius: 999px;
	padding: 0.4rem 0.65rem;
	position: relative;
	transition: background-color var(--wp--custom--transition--fast),
		color var(--wp--custom--transition--fast);
	white-space: nowrap;
}

.rz-nav .wp-block-navigation-item__content:hover {
	background-color: var(--rz-hover-tint);
}

.rz-header.rz-on-dark .rz-nav .wp-block-navigation-item__content:hover {
	background-color: rgb(255 255 255 / 10%);
}

.rz-nav .wp-block-navigation__submenu-container {
	-webkit-backdrop-filter: var(--rz-glass-blur);
	backdrop-filter: var(--rz-glass-blur);
	background-color: var(--rz-glass-submenu) !important;
	border: 1px solid var(--rz-glass-hairline) !important;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--rz-glass-shadow-lift);
	padding-block: 0.4rem;
}

.rz-nav .wp-block-navigation__responsive-container-open,
.rz-nav .wp-block-navigation__responsive-container-close {
	min-height: 44px;
	min-width: 44px;
}

/* The mobile overlay is glass too, so the page stays faintly visible behind. */
.rz-nav .wp-block-navigation__responsive-container.is-menu-open {
	-webkit-backdrop-filter: saturate(160%) blur(26px);
	backdrop-filter: saturate(160%) blur(26px);
	background-color: var(--rz-glass-overlay) !important;
	padding: var(--wp--preset--spacing--40) var(--rz-gutter);
}

.rz-header.rz-on-dark .rz-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: rgb(11 18 32 / 90%) !important;
}

.rz-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding-inline: 0;
}

.rz-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--50);
}

.rz-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--x-large);
}

/* ------------------------------------------------------------------ *
 * 4. Footer
 * ------------------------------------------------------------------ */

.rz-footer__brand {
	max-width: 24rem;
}

.rz-footer .wp-block-social-links .wp-social-link {
	transition: opacity var(--wp--custom--transition--fast);
}

.rz-footer .wp-block-social-links .wp-social-link:hover {
	opacity: 0.7;
}

.rz-footer__legal {
	gap: var(--wp--preset--spacing--20);
}

.rz-footer.rz-on-dark a:hover,
.rz-footer.rz-on-dark a:focus-visible {
	color: var(--wp--preset--color--accent-2);
}

/* Back-to-top button, injected by theme.js. */
.rz-to-top {
	-webkit-backdrop-filter: var(--rz-glass-blur);
	backdrop-filter: var(--rz-glass-blur);
	align-items: center;
	background-color: var(--rz-float-bg);
	border: 0;
	border-radius: 999px;
	bottom: max(1.25rem, env(safe-area-inset-bottom));
	box-shadow: 0 10px 24px -10px rgb(15 23 42 / 55%);
	color: var(--rz-float-fg);
	cursor: pointer;
	display: flex;
	height: 44px;
	inset-inline-end: 1.25rem;
	justify-content: center;
	opacity: 0;
	position: fixed;
	transform: translateY(0.5rem);
	transition: opacity var(--wp--custom--transition--base),
		transform var(--wp--custom--transition--base);
	visibility: hidden;
	width: 44px;
	z-index: 90;
}

.rz-to-top.is-visible {
	opacity: 1;
	transform: none;
	visibility: visible;
}

.rz-to-top:hover {
	background-color: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------------------ *
 * 5. Sections and hero
 * ------------------------------------------------------------------ */

/*
 * Sections butt directly against each other.
 *
 * WordPress puts the global block gap between top-level blocks and between the
 * children of any constrained container:
 *
 *   :where(.wp-site-blocks) > *            { margin-block-start: 1.5rem }
 *   :root :where(.is-layout-constrained) > * { margin-block-start: 1.5rem }
 *
 * Every section in this theme already carries its own vertical padding, so
 * that extra gap lands *between* two coloured bands and shows up as a strip of
 * page background — most visibly where a tinted section meets a white one.
 *
 * Only section-level wrappers are zeroed. Paragraphs, headings and images
 * inside a section keep the block gap that gives prose its rhythm, so this
 * does not flatten the typography.
 *
 * The `:root` prefix is there to match the specificity of the core rule above
 * and win on source order, without resorting to !important.
 */
.wp-site-blocks > * {
	margin-block: 0;
}

:root .rz-section,
:root .rz-hero,
:root .rz-cta-strip,
:root .wp-block-template-part {
	margin-block: 0;
}

.rz-hero .wp-block-heading {
	text-wrap: balance;
}

/*
 * Ambient light.
 *
 * Frosted glass only reads as glass when there is something behind it worth
 * blurring. These very low-opacity colour washes sit behind the hero and the
 * tinted bands, so cards and the header bar pick up a faint tint from the
 * page instead of looking like flat grey boxes. They are decorative, so they
 * are drawn on a pseudo-element and kept out of the pointer and a11y trees.
 */
.rz-hero,
.rz-section,
.rz-cta-strip {
	isolation: isolate;
	position: relative;
}

.rz-hero::after,
.rz-section.has-surface-background-color::after {
	background:
		radial-gradient(38rem 26rem at 8% -10%, var(--rz-aurora-1), transparent 62%),
		radial-gradient(32rem 24rem at 92% 8%, var(--rz-aurora-2), transparent 64%),
		radial-gradient(30rem 20rem at 60% 110%, var(--rz-aurora-3), transparent 60%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

/* The dark bands get a cooler, deeper wash. */
.rz-on-dark::after,
.rz-cta-strip::after {
	background:
		radial-gradient(40rem 28rem at 12% 0%, var(--rz-aurora-dark-1), transparent 60%),
		radial-gradient(34rem 26rem at 88% 100%, var(--rz-aurora-dark-2), transparent 62%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.rz-on-dark > *,
.rz-cta-strip > * {
	position: relative;
	z-index: 1;
}

/* Cover blocks paint their own background, so the wash goes inside. */
.rz-hero.is-cover::after {
	content: none;
}

.rz-badge {
	-webkit-backdrop-filter: var(--rz-glass-blur-soft);
	backdrop-filter: var(--rz-glass-blur-soft);
	align-items: center;
	background-color: var(--rz-glass);
	border-radius: 999px;
	box-shadow: inset 0 1px 0 var(--rz-glass-edge),
		0 0 0 1px var(--rz-glass-hairline),
		0 6px 18px -12px rgb(15 23 42 / 35%);
	color: var(--wp--preset--color--accent);
	display: inline-flex;
	padding: 0.4rem 0.9rem 0.4rem 0.7rem;
	width: fit-content;
}

.rz-badge p {
	color: var(--wp--preset--color--contrast-2);
	margin: 0;
}

/* Section intros sit at the wide boundary so their heading lines up with the
   grid beneath, while the text keeps a comfortable reading measure. */
.rz-section__intro {
	max-width: 44rem;
}

/*
 * Post content is full width so that section patterns inside a page can run
 * edge to edge; the constrained layout still holds ordinary prose to the
 * reading measure. This just restores the breathing room the removed wrapper
 * used to provide, without re-introducing the width cap.
 */
.rz-page-content > :last-child:not(.alignfull) {
	margin-bottom: var(--wp--preset--spacing--70);
}

/*
 * Column caps for grid-layout Groups.
 *
 * The editor's grid layout uses `repeat(auto-fill, minmax(min(X, 100%), 1fr))`,
 * which keeps adding tracks as the viewport grows — so a six-card section goes
 * 4 + 2 on a wide screen, and a three-item Query Loop leaves an empty track.
 *
 * Raising the track minimum to "at least a fraction of the container" caps the
 * count without giving up the automatic collapse on smaller screens: the
 * max() falls back to the pixel minimum as soon as the fraction gets smaller
 * than it. !important is needed because the editor emits its own rule for the
 * generated .wp-container-* class at the same specificity.
 */
/*
 * The subtracted figure is a gap allowance: the track minimum has to leave
 * room for the gaps between N columns, or N tracks will not fit and the grid
 * silently drops to N-1. It is deliberately generous (covering block gaps up
 * to 4rem) because the minimum only has to land between "N fit" and "N+1 fit"
 * — the 1fr maximum then stretches the tracks to fill the row exactly.
 */
.rz-cols-2.is-layout-grid {
	grid-template-columns: repeat(
		auto-fill,
		minmax(max(var(--rz-col-min, 17rem), (100% - 4rem) / 2), 1fr)
	) !important;
}

.rz-cols-3.is-layout-grid {
	grid-template-columns: repeat(
		auto-fill,
		minmax(max(var(--rz-col-min, 17rem), (100% - 8rem) / 3), 1fr)
	) !important;
}

.rz-cols-4.is-layout-grid {
	grid-template-columns: repeat(
		auto-fill,
		minmax(max(var(--rz-col-min, 13rem), (100% - 12rem) / 4), 1fr)
	) !important;
}

.rz-logo-row {
	row-gap: var(--wp--preset--spacing--40) !important;
}

/* The logo SVGs are 260px wide intrinsically; without a cap on the figure
   they push the row to four-up and wrap awkwardly. */
.rz-logo {
	flex: 0 0 auto;
	max-width: 9rem;
}

.rz-logo img {
	filter: grayscale(1);
	height: auto;
	opacity: 0.6;
	transition: opacity var(--wp--custom--transition--base),
		filter var(--wp--custom--transition--base);
	width: 100%;
}

.rz-logo:hover img {
	filter: grayscale(0);
	opacity: 1;
}

.rz-on-dark .rz-logo img {
	filter: grayscale(1) invert(1) brightness(2);
	opacity: 0.75;
}

/* ------------------------------------------------------------------ *
 * 6. Block styles — surfaces
 * ------------------------------------------------------------------ */

/*
 * Cards are frosted rather than flat white: a translucent fill, a hairline
 * that catches light at the top edge, and a wide soft shadow instead of a
 * hard border. Over a plain background they simply read as very clean cards;
 * over the ambient gradients they pick up colour from what is behind them.
 */
.is-style-rz-card,
.is-style-rz-card-hover {
	-webkit-backdrop-filter: var(--rz-glass-blur-soft);
	backdrop-filter: var(--rz-glass-blur-soft);
	background-color: var(--rz-glass);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: inset 0 1px 0 var(--rz-glass-edge),
		0 0 0 1px var(--rz-glass-hairline),
		var(--rz-glass-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
}

.rz-on-dark .is-style-rz-card,
.rz-on-dark .is-style-rz-card-hover {
	background-color: var(--rz-glass-on-dark);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%),
		0 0 0 1px var(--rz-glass-edge-dark);
}

.is-style-rz-card-hover {
	transition: box-shadow var(--wp--custom--transition--base),
		transform var(--wp--custom--transition--base);
}

@media (hover: hover) {
	.is-style-rz-card-hover:hover {
		background-color: var(--rz-glass-strong);
		box-shadow: inset 0 1px 0 var(--rz-glass-edge),
			0 0 0 1px rgb(3 105 161 / 18%),
			var(--rz-glass-shadow-lift);
		transform: translateY(-3px);
	}

	.rz-on-dark .is-style-rz-card-hover:hover {
		background-color: var(--rz-glass-on-dark-strong);
		box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%),
			0 0 0 1px rgb(125 211 252 / 28%),
			0 28px 56px -28px rgb(0 0 0 / 70%);
	}
}

/* Make the whole card activate the heading link it contains. */
.is-style-rz-card-hover:has(h3 a, .wp-block-post-title a) h3 a::after,
.is-style-rz-card-hover .wp-block-post-title a::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

.is-style-rz-card-hover a:not(h3 a, .wp-block-post-title a) {
	position: relative;
	z-index: 2;
}

.is-style-rz-panel {
	-webkit-backdrop-filter: var(--rz-glass-blur-soft);
	backdrop-filter: var(--rz-glass-blur-soft);
	background-color: var(--rz-glass-panel);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: inset 0 1px 0 var(--rz-glass-edge),
		0 0 0 1px var(--rz-glass-hairline);
}

.rz-on-dark .is-style-rz-panel {
	background-color: var(--rz-dark-surface);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%),
		0 0 0 1px var(--rz-glass-edge-dark);
}

.is-style-rz-outline {
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: 0 0 0 1px var(--rz-glass-hairline);
}

.rz-on-dark .is-style-rz-outline {
	box-shadow: 0 0 0 1px var(--rz-glass-edge-dark);
}

/* The explicit glass style, for panels that sit on dark or image backgrounds. */
.is-style-rz-glass {
	-webkit-backdrop-filter: var(--rz-glass-blur);
	backdrop-filter: var(--rz-glass-blur);
	background-color: var(--rz-glass-on-dark-strong);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%),
		0 0 0 1px var(--rz-glass-edge-dark),
		0 24px 56px -32px rgb(0 0 0 / 70%);
}

@supports not (backdrop-filter: blur(1px)) {
	.is-style-rz-glass {
		background-color: rgb(15 23 42 / 82%);
	}

	.is-style-rz-panel {
		background-color: var(--wp--preset--color--surface);
	}
}

@media (prefers-reduced-transparency: reduce) {
	.is-style-rz-panel {
		background-color: var(--wp--preset--color--surface);
	}

	.is-style-rz-glass {
		background-color: rgb(15 23 42 / 88%);
	}
}

.is-style-rz-sticky-aside {
	align-self: start;
}

/* A faint grid, for hero and cover sections that need texture. */
.is-style-rz-grid-backdrop {
	position: relative;
}

.is-style-rz-grid-backdrop::before {
	background-image:
		linear-gradient(to right, currentColor 1px, transparent 1px),
		linear-gradient(to bottom, currentColor 1px, transparent 1px);
	background-size: 44px 44px;
	content: "";
	inset: 0;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
	opacity: 0.06;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.is-style-rz-grid-backdrop > * {
	position: relative;
	z-index: 1;
}

.is-style-rz-vignette::after {
	background: radial-gradient(ellipse at center, transparent 45%, rgb(0 0 0 / 45%) 100%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

/* Divided columns / grids: hairline rules between children. */
.is-style-rz-divided > * + * {
	border-inline-start: 1px solid var(--wp--preset--color--line);
	padding-inline-start: var(--wp--preset--spacing--40);
}

.rz-on-dark .is-style-rz-divided > * + * {
	border-inline-start-color: rgb(255 255 255 / 14%);
}

/* ------------------------------------------------------------------ *
 * 7. Block styles — typography
 * ------------------------------------------------------------------ */

.is-style-rz-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.is-style-rz-underline {
	padding-bottom: 0.35em;
	position: relative;
}

.is-style-rz-underline::after {
	background-color: var(--wp--preset--color--accent);
	border-radius: 2px;
	bottom: 0;
	content: "";
	height: 3px;
	inset-inline-start: 0;
	position: absolute;
	width: 3rem;
}

.is-style-rz-balance {
	text-wrap: balance;
}

.is-style-rz-lead {
	max-width: 44ch;
	text-wrap: pretty;
}

/* A constrained layout centres any child narrower than the content size, which
   would indent the lead away from the heading it belongs to. */
.is-style-rz-lead:not(.has-text-align-center) {
	margin-inline-start: 0;
}

.has-text-align-center.is-style-rz-lead {
	margin-inline: auto;
}

/* Tabular figures stop metrics jittering as they count up. */
.is-style-rz-metric {
	font-family: var(--wp--preset--font-family--heading);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	letter-spacing: -0.02em;
}

/* ------------------------------------------------------------------ *
 * 8. Block styles — buttons
 * ------------------------------------------------------------------ */

.wp-block-button__link {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: 44px;
	text-align: center;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
}

.wp-block-button__link:active {
	transform: translateY(0);
}

.is-style-rz-ghost .wp-block-button__link {
	background-color: transparent;
	border-color: var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
}

.is-style-rz-ghost .wp-block-button__link:hover,
.is-style-rz-ghost .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.rz-on-dark .is-style-rz-ghost .wp-block-button__link {
	border-color: color-mix(in srgb, var(--rz-fixed-ink, var(--wp--preset--color--base)) 34%, transparent);
	color: var(--rz-fixed-ink, var(--wp--preset--color--base)) !important;
}

.rz-on-dark .is-style-rz-ghost .wp-block-button__link:hover,
.rz-on-dark .is-style-rz-ghost .wp-block-button__link:focus-visible {
	background-color: var(--rz-fixed-ink, var(--wp--preset--color--base));
	border-color: var(--rz-fixed-ink, var(--wp--preset--color--base));
	color: var(--rz-fixed-ink-contrast, var(--wp--preset--color--contrast)) !important;
}

.is-style-rz-quiet .wp-block-button__link {
	background-color: var(--wp--preset--color--muted);
	border-color: transparent;
	color: var(--wp--preset--color--contrast);
}

.is-style-rz-quiet .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--line);
	border-color: transparent;
	color: var(--wp--preset--color--contrast);
}

.is-style-rz-on-dark .wp-block-button__link {
	background-color: var(--rz-fixed-ink, var(--wp--preset--color--base));
	border-color: var(--rz-fixed-ink, var(--wp--preset--color--base));
	color: var(--rz-fixed-ink-contrast, var(--wp--preset--color--contrast));
}

.is-style-rz-on-dark .wp-block-button__link:hover,
.is-style-rz-on-dark .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--accent-3);
	border-color: var(--wp--preset--color--accent-3);
	color: var(--rz-fixed-ink-contrast, var(--wp--preset--color--contrast));
}

.is-style-rz-large .wp-block-button__link {
	font-size: var(--wp--preset--font-size--medium);
	min-height: 52px;
	padding: 1rem 1.9rem;
}

.is-style-rz-arrow .wp-block-button__link {
	background-color: transparent;
	border-color: transparent;
	color: var(--wp--preset--color--accent);
	padding-inline: 0.25rem;
}

.is-style-rz-arrow .wp-block-button__link:hover {
	background-color: transparent;
	border-color: transparent;
	color: var(--wp--preset--color--contrast);
	transform: none;
}

/* ------------------------------------------------------------------ *
 * 9. Block styles — lists, separators, pills
 * ------------------------------------------------------------------ */

.is-style-rz-checklist,
.is-style-rz-excluded,
.is-style-rz-unstyled {
	list-style: none;
	padding-inline-start: 0 !important;
}

.is-style-rz-checklist li,
.is-style-rz-excluded li {
	padding-inline-start: 1.75rem;
	position: relative;
}

.is-style-rz-checklist li::before,
.is-style-rz-excluded li::before {
	background-color: currentColor;
	content: "";
	height: 1.05em;
	inset-block-start: 0.28em;
	inset-inline-start: 0;
	position: absolute;
	width: 1.15em;
}

.is-style-rz-checklist li::before {
	color: var(--wp--preset--color--accent);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5 11-12'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5 11-12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.is-style-rz-checklist.is-on-dark li::before,
.rz-on-dark .is-style-rz-checklist li::before {
	color: var(--wp--preset--color--accent-2);
}

.is-style-rz-excluded {
	color: var(--wp--preset--color--contrast-3);
}

.is-style-rz-excluded li::before {
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

.is-style-rz-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.6rem;
}

.is-style-rz-unstyled li a {
	text-decoration: none;
}

.is-style-rz-unstyled li a:hover {
	text-decoration: underline;
}

.is-style-rz-accent {
	background-color: var(--wp--preset--color--accent) !important;
	border: 0;
	border-radius: 2px;
	height: 3px;
	margin-inline: 0;
	max-width: 3.25rem;
	opacity: 1;
}

.is-style-rz-fade {
	background: linear-gradient(90deg, var(--wp--preset--color--line), transparent) !important;
	border: 0;
	height: 1px;
	opacity: 1;
}

.rz-on-dark .is-style-rz-fade {
	background: linear-gradient(90deg, rgb(255 255 255 / 20%), transparent) !important;
}

/* Term pills, and the static .rz-pill used by hand-built cards. */
.rz-pill,
.is-style-rz-pills a,
.is-style-rz-pills {
	font-family: var(--wp--preset--font-family--heading);
}

.rz-pill,
.is-style-rz-pills a {
	-webkit-backdrop-filter: var(--rz-glass-blur-soft);
	backdrop-filter: var(--rz-glass-blur-soft);
	background-color: var(--rz-tint-soft);
	box-shadow: inset 0 0 0 1px var(--rz-tint-ring);
	border-radius: 999px;
	color: var(--wp--preset--color--accent);
	display: inline-block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.02em;
	padding: 0.25rem 0.7rem;
	text-decoration: none;
	width: fit-content;
}

.is-style-rz-pills a:hover {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.is-style-rz-pills.is-on-dark a,
.rz-on-dark .is-style-rz-pills a {
	background-color: var(--rz-dark-surface-strong);
	color: var(--wp--preset--color--accent-2);
}

.is-style-rz-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.is-style-rz-pills .wp-block-post-terms__separator {
	display: none;
}

.is-style-rz-pill .wp-block-search__inside-wrapper {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding: 0.25rem;
}

.is-style-rz-pill .wp-block-search__input {
	background: transparent;
	border: 0;
	padding-inline: 1rem;
}

.is-style-rz-pill .wp-block-search__button {
	border-radius: 999px;
	min-height: 40px;
}

/* ------------------------------------------------------------------ *
 * 10. Block styles — media
 * ------------------------------------------------------------------ */

.is-style-rz-shadow img {
	box-shadow: 0 32px 64px -28px rgb(15 23 42 / 38%);
}

.is-style-rz-framed img {
	box-shadow: var(--rz-ring), 0 1px 2px rgb(15 23 42 / 6%);
}

.is-style-rz-zoom {
	overflow: hidden;
}

.is-style-rz-zoom img {
	display: block;
	width: 100%;
}

@media (hover: hover) {
	.is-style-rz-card-hover:hover .is-style-rz-zoom img,
	.is-style-rz-zoom:hover img {
		transform: scale(1.04);
	}
}

.is-style-rz-portrait img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
}

/* ------------------------------------------------------------------ *
 * 11. Cards: services, cases, team, quotes
 * ------------------------------------------------------------------ */

.rz-service-card .wp-block-heading {
	text-wrap: balance;
}

.rz-numbered-card {
	overflow: hidden;
}

.rz-step-number {
	line-height: 1 !important;
	margin-bottom: calc(-1 * var(--wp--preset--spacing--20)) !important;
	user-select: none;
}

.rz-case-card .wp-block-post-title,
.rz-case-card h3 {
	text-wrap: balance;
}

.rz-case-card h3 a {
	text-decoration: none;
}

.rz-case-card h3 a:hover {
	color: var(--wp--preset--color--accent);
}

/* Lifts the case-study hero image up over the dark band above it. A class
   rather than a block attribute, because `calc()` in block JSON gets
   re-escaped by the editor on every save. */
.rz-pull-up {
	margin-top: calc(-1 * var(--wp--preset--spacing--50));
	position: relative;
	z-index: 1;
}

@media (max-width: 599px) {
	.rz-pull-up {
		margin-top: var(--wp--preset--spacing--40);
	}
}

.rz-metrics {
	row-gap: var(--wp--preset--spacing--30) !important;
}

/* Metrics in the case-study facts panel are short phrases, not bare figures,
   so they need to wrap on spaces rather than break mid-word in the narrow
   grid tracks. */
.rz-case-facts .is-style-rz-metric {
	font-size: var(--wp--preset--font-size--large);
	hyphens: none;
	line-height: 1.25;
	overflow-wrap: normal;
	word-break: normal;
}

.rz-team-card .wp-block-heading {
	text-wrap: balance;
}

.rz-team-card__links {
	display: flex;
	gap: 0.5rem;
	margin-block: 0.25rem 0;
}

.rz-team-card__links a {
	align-items: center;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--contrast-3);
	display: inline-flex;
	height: 36px;
	justify-content: center;
	transition: background-color var(--wp--custom--transition--fast),
		color var(--wp--custom--transition--fast);
	width: 36px;
}

.rz-team-card__links a:hover {
	background-color: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--accent);
}

.rz-quote-card {
	gap: var(--wp--preset--spacing--30);
}

.rz-rating {
	color: var(--rz-rating);
	display: flex;
	gap: 0.15rem;
}

.rz-quote-mark {
	color: var(--wp--preset--color--accent-2);
	display: block;
	opacity: 0.8;
}

.rz-attribution img {
	height: 44px;
	object-fit: cover;
	width: 44px;
}

.rz-steps {
	position: relative;
}

.rz-step__head {
	align-items: center;
	display: flex;
	gap: 0.75rem;
	justify-content: space-between;
}

.rz-step__dot {
	align-items: center;
	background-color: var(--wp--preset--color--accent);
	border-radius: 999px;
	color: var(--wp--preset--color--base);
	display: inline-flex;
	height: 2.5rem;
	justify-content: center;
	position: relative;
	width: 2.5rem;
	z-index: 1;
}

.rz-step__index {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	line-height: 1;
}

.rz-badge-img img {
	height: auto;
	width: 84px;
}

.rz-contact-route {
	align-items: flex-start;
}

.rz-contact-route a {
	text-decoration: none;
}

.rz-contact-route a:hover {
	text-decoration: underline;
}

.rz-tech-grid {
	/* The chips are already boxed, so the divider style would double up. */
	border: 0;
}

.rz-tech {
	background-color: var(--rz-glass);
	border: 1px solid var(--rz-glass-hairline);
	border-radius: var(--wp--custom--radius--md);
	min-height: 100%;
	text-align: center;
	transition: border-color var(--wp--custom--transition--base),
		transform var(--wp--custom--transition--base);
}

.rz-tech img {
	height: 2.5rem;
	object-fit: contain;
	width: auto;
}

/*
 * Technology marks are third-party artwork: mostly dark glyphs on transparent
 * backgrounds, drawn for a light page, and often carrying brand colour that
 * must not be inverted. So the plate behind them is a fixed near-white in
 * every palette — one of the few places the theme cannot derive a value from
 * the presets without wrecking the logos.
 */
.rz-tech .wp-block-image {
	align-items: center;
	background-color: rgb(255 255 255 / 90%);
	border-radius: var(--wp--custom--radius--sm);
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0.5rem;
}

.rz-tech p {
	margin: 0;
}

/* A card that opens with a photograph: the image bleeds to the card's edges. */
.rz-media-card {
	overflow: hidden;
	padding-top: 0 !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
}

.rz-media-card > .wp-block-image {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.rz-media-card > .wp-block-image img {
	border-radius: 0;
	display: block;
	width: 100%;
}

.rz-media-card > :not(.wp-block-image) {
	padding-left: var(--wp--preset--spacing--30);
	padding-right: var(--wp--preset--spacing--30);
}

.rz-person {
	min-height: 100%;
}

/*
 * Body copy in a full-width band. It sits inside an `alignwide` wrapper so it
 * starts on the same line as the section's heading, but keeps a readable
 * measure rather than running the full width.
 */
.rz-prose {
	max-width: 48rem;
}

.rz-prose > * + * {
	margin-top: var(--wp--preset--spacing--30);
}

/* ------------------------------------------------------------------ *
 * 12. Pricing
 * ------------------------------------------------------------------ */

.rz-billing {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
}

.rz-billing__switch {
	-webkit-backdrop-filter: var(--rz-glass-blur-soft);
	backdrop-filter: var(--rz-glass-blur-soft);
	background-color: var(--rz-switch-track);
	border-radius: 999px;
	box-shadow: inset 0 1px 2px var(--rz-hover-tint),
		0 0 0 1px var(--rz-glass-hairline);
	display: inline-flex;
	gap: 0.25rem;
	padding: 0.3rem;
}

.rz-billing__btn {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: var(--wp--preset--color--contrast-2);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	gap: 0.45rem;
	min-height: 44px;
	padding: 0.5rem 1.2rem;
	transition: background-color var(--wp--custom--transition--base),
		color var(--wp--custom--transition--base);
}

.rz-billing__btn:hover {
	color: var(--wp--preset--color--contrast);
}

.rz-billing__btn.is-active {
	background-color: var(--rz-glass-strong);
	box-shadow: inset 0 1px 0 var(--rz-glass-inset),
		0 2px 8px -2px var(--rz-hover-tint);
	color: var(--wp--preset--color--contrast);
}

.rz-billing__save {
	background-color: var(--wp--preset--color--accent-3);
	border-radius: 999px;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--x-small);
	padding: 0.1rem 0.5rem;
}

.rz-billing__status {
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--x-small);
	margin: 0;
}

.rz-pricing__grid {
	align-items: stretch;
}

.rz-plan {
	height: 100%;
}

.rz-plan.is-featured {
	background-color: var(--rz-featured-bg);
	box-shadow: inset 0 1px 0 var(--rz-glass-edge),
		0 0 0 1.5px var(--rz-featured-ring),
		var(--rz-featured-glow);
}

.rz-plan__flag {
	background-color: var(--wp--preset--color--accent);
	border-radius: 999px;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	margin: 0;
	padding: 0.3rem 0.8rem;
	text-transform: uppercase;
	width: fit-content;
}

.rz-plan__price {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: 0;
}

.rz-plan__amount {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xxx-large);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.05;
}

.rz-plan__unit {
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--small);
}

/* The "not included" list is pushed to the foot of the card so it lines up
   across plans. Plans without one just end after their checklist. */
.rz-plan > .is-style-rz-excluded:last-child {
	margin-top: auto;
}

/* ------------------------------------------------------------------ *
 * 13. FAQ and details
 * ------------------------------------------------------------------ */

.is-style-rz-faq-item {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-block: var(--wp--preset--spacing--30);
}

.is-style-rz-faq-item > summary {
	align-items: flex-start;
	display: flex;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	gap: 1rem;
	justify-content: space-between;
	letter-spacing: -0.012em;
	line-height: 1.4;
	list-style: none;
	min-height: 44px;
	padding-inline-end: 0.25rem;
	text-wrap: balance;
	transition: color var(--wp--custom--transition--fast);
}

.is-style-rz-faq-item > summary::-webkit-details-marker,
.is-style-rz-faq-item > summary::marker {
	content: "";
	display: none;
}

.is-style-rz-faq-item > summary:hover {
	color: var(--wp--preset--color--accent);
}

.is-style-rz-faq-item > summary::after {
	background-color: currentColor;
	content: "";
	flex: none;
	height: 1.1rem;
	margin-top: 0.3rem;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--wp--custom--transition--base);
	width: 1.1rem;
}

.is-style-rz-faq-item[open] > summary {
	color: var(--wp--preset--color--accent);
}

.is-style-rz-faq-item[open] > summary::after {
	transform: rotate(45deg);
}

.is-style-rz-faq-item > :not(summary) {
	margin-top: var(--wp--preset--spacing--20);
	max-width: 62ch;
}

.is-style-rz-faq-card {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	margin-bottom: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--30);
}

/* ------------------------------------------------------------------ *
 * 14. Tables
 * ------------------------------------------------------------------ */

.is-style-rz-compare table {
	border-collapse: separate;
	border-spacing: 0;
	min-width: 44rem;
}

.is-style-rz-compare {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.is-style-rz-compare th,
.is-style-rz-compare td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 0.95rem 1rem;
	text-align: start;
}

.is-style-rz-compare thead th {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	position: sticky;
	top: 0;
	z-index: 1;
}

.is-style-rz-compare thead th:first-child {
	border-start-start-radius: var(--wp--custom--radius--md);
}

.is-style-rz-compare thead th:last-child {
	border-start-end-radius: var(--wp--custom--radius--md);
}

.is-style-rz-compare tbody th {
	font-weight: 500;
}

.is-style-rz-compare tbody tr:nth-child(even) {
	background-color: var(--wp--preset--color--base);
}

/* Words carry the meaning; colour only reinforces it. */
.is-style-rz-compare td {
	color: var(--wp--preset--color--contrast-2);
}

/* ------------------------------------------------------------------ *
 * 15. Contact form
 * ------------------------------------------------------------------ */

/* The form usually sits inside a card, where the global h2 size is too loud. */
.rz-form__heading {
	font-size: var(--wp--preset--font-size--xx-large);
	margin-bottom: 0.4rem;
}

.rz-form__description {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: var(--wp--preset--spacing--40);
}

.rz-form {
	/* One place to tune the form's rhythm and control size. */
	--rz-field-row-gap: 1.75rem;
	--rz-field-col-gap: 1.5rem;
	/* Only the submit button and the editor placeholders need a fixed height;
	   real controls size themselves from padding + line-height. */
	--rz-control-height: 3.25rem;
}

.rz-form__grid {
	/* Rows need more air than columns, or the fields read as one block. */
	display: grid;
	gap: var(--rz-field-row-gap) var(--rz-field-col-gap);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
}

.rz-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin: 0;
}

.rz-form__field.is-full {
	grid-column: 1 / -1;
}

.rz-form__label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.rz-form__label.is-inline {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
}

.rz-form__required {
	color: var(--wp--preset--color--accent);
	margin-inline-start: 0.15rem;
}

/*
 * box-sizing is the important line here.
 *
 * Form controls are not covered by the editor's border-box reset, so with
 * `width: 100%` the horizontal padding and border were added *on top* of the
 * full column width — every input sat 34px wider than its cell and ran under
 * the field beside it. For the same reason `min-height` applied to the content
 * box, so a 52px minimum rendered as a 78px tall field.
 *
 * With border-box the padding is inside the declared width, and the height
 * falls out of padding + line-height (about 51px) with no minimum needed —
 * still comfortably past the 44px touch-target floor.
 */
.rz-form__control {
	-webkit-backdrop-filter: var(--rz-glass-blur-soft);
	backdrop-filter: var(--rz-glass-blur-soft);
	background-color: var(--rz-glass-thin);
	border: 1px solid var(--rz-glass-hairline);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--rz-control-inset);
	box-sizing: border-box;
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	/* 16px minimum stops iOS zooming the page on focus. */
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	padding: 0.75rem 1rem;
	transition: border-color var(--wp--custom--transition--fast),
		box-shadow var(--wp--custom--transition--fast);
	width: 100%;
}

/*
 * A native select sizes itself from its own font metrics and ignores the
 * padding that gives the text inputs their height, so it ends up visibly
 * shorter than the fields beside it. Dropping the native appearance and
 * drawing the chevron ourselves makes every control the same height.
 */
select.rz-form__control {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 0.9rem center;
	background-repeat: no-repeat;
	background-size: 1.1rem;
	padding-right: 2.75rem;
}

/* Edge/IE paint their own arrow on top of ours. */
select.rz-form__control::-ms-expand {
	display: none;
}

.rz-form__control:focus {
	background-color: var(--rz-glass-strong);
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px rgb(3 105 161 / 15%);
	outline: none;
}

textarea.rz-form__control {
	/* A textarea has no intrinsic height, so this one keeps a min-height — it
	   is now measured border-box, like every other control. */
	min-height: 10.5rem;
	padding-block: 0.85rem;
	resize: vertical;
}

.rz-form__field.has-error .rz-form__control {
	border-color: var(--rz-bad-fg);
}

.rz-form__help {
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.45;
}

.rz-form__error {
	align-items: center;
	color: var(--rz-bad-fg);
	display: flex;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	gap: 0.3rem;
}

.rz-form__error::before {
	content: "⚠";
	font-size: 1em;
}

.rz-form__consent {
	align-items: start;
	display: grid;
	gap: 0.3rem 0.65rem;
	grid-template-columns: auto 1fr;
	margin-top: 0.25rem;
}

.rz-form__checkbox {
	accent-color: var(--wp--preset--color--accent);
	box-sizing: border-box;
	flex: none;
	height: 1.15rem;
	margin-top: 0.2rem;
	width: 1.15rem;
}

.rz-form__consent .rz-form__error {
	grid-column: 2;
}

.rz-form__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--50);
}

.rz-form__submit {
	cursor: pointer;
	min-height: var(--rz-control-height);
	padding-inline: 2rem;
	position: relative;
}

.rz-form__legal {
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--x-small);
}

.rz-form__spinner {
	display: none;
	height: 1rem;
	margin-inline-start: 0.6rem;
	width: 1rem;
}

.rz-form__submit.is-busy .rz-form__spinner {
	animation: rz-spin 0.7s linear infinite;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 999px;
	display: inline-block;
}

@keyframes rz-spin {
	to {
		transform: rotate(360deg);
	}
}

.rz-form__trap {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}

.rz-form__notice {
	align-items: flex-start;
	border-radius: var(--wp--custom--radius--md);
	display: flex;
	gap: 0.7rem;
	margin-bottom: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
}

.rz-form__notice p {
	margin: 0;
}

.rz-form__notice ul {
	margin: 0.4rem 0 0;
	padding-inline-start: 1.1rem;
}

.rz-form__notice.is-success {
	background-color: var(--rz-ok-bg);
	box-shadow: inset 0 0 0 1px var(--rz-ok-ring);
	color: var(--rz-ok-fg);
}

.rz-form__notice.is-error {
	background-color: var(--rz-bad-bg);
	box-shadow: inset 0 0 0 1px var(--rz-bad-ring);
	color: var(--rz-bad-fg);
}

.rz-form__notice.is-error a {
	color: inherit;
}

/* Editor preview placeholders. */
.rz-form.is-editor-preview .rz-form__control.is-preview {
	background-color: var(--wp--preset--color--muted);
	border-style: dashed;
	display: block;
	min-height: var(--rz-control-height);
}

.rz-form.is-editor-preview .rz-form__control.is-preview.is-textarea {
	min-height: 10.5rem;
}

.rz-form.is-editor-preview .rz-form__checkbox.is-preview {
	background-color: var(--wp--preset--color--muted);
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: 3px;
	display: inline-block;
	height: 1.15rem;
	width: 1.15rem;
}

.rz-form__editor-note {
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--x-small);
	font-style: italic;
	margin-top: var(--wp--preset--spacing--20);
}

/* ------------------------------------------------------------------ *
 * 16. Motion: reveal, stagger, counters
 *
 * The `rz-anim` class is added to <html> by a tiny inline script in
 * wp_head, so nothing is hidden for visitors without JavaScript, and a
 * failsafe timer in that script removes it if theme.js never arrives.
 * ------------------------------------------------------------------ */

.rz-anim .is-style-rz-reveal,
.rz-anim .is-style-rz-stagger > * {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.rz-anim .is-style-rz-reveal.is-in-view,
.rz-anim .is-style-rz-stagger.is-in-view > * {
	opacity: 1;
	transform: none;
}

.rz-anim .is-style-rz-stagger.is-in-view > *:nth-child(2) {
	transition-delay: 70ms;
}

.rz-anim .is-style-rz-stagger.is-in-view > *:nth-child(3) {
	transition-delay: 140ms;
}

.rz-anim .is-style-rz-stagger.is-in-view > *:nth-child(4) {
	transition-delay: 210ms;
}

.rz-anim .is-style-rz-stagger.is-in-view > *:nth-child(5) {
	transition-delay: 280ms;
}

.rz-anim .is-style-rz-stagger.is-in-view > *:nth-child(n + 6) {
	transition-delay: 340ms;
}

/* ------------------------------------------------------------------ *
 * 17. Responsive tiers
 * ------------------------------------------------------------------ */

/* --- Mobile first: up to 599px ------------------------------------ */

@media (max-width: 599px) {
	.rz-header__cta .wp-block-button__link {
		font-size: var(--wp--preset--font-size--x-small);
		padding-inline: 1rem;
	}

	/* The site title alone is enough brand at this width. */
	.rz-header__brand .wp-block-site-logo {
		display: none;
	}

	/*
	 * A two-word site name wraps here and doubles the height of the bar, which
	 * then eats into a sticky header on every scroll. Keep it on one line and
	 * let it shrink to fit instead.
	 */
	.rz-header__brand .wp-block-site-title {
		font-size: clamp(0.95rem, 3.6vw, 1.1rem);
		white-space: nowrap;
	}

	.is-style-rz-large .wp-block-button__link {
		font-size: var(--wp--preset--font-size--small);
		min-height: 48px;
		padding: 0.9rem 1.4rem;
	}

	.wp-block-buttons .wp-block-button {
		width: 100%;
	}

	.wp-block-buttons .wp-block-button__link {
		width: 100%;
	}

	.rz-form {
		--rz-field-row-gap: 1.5rem;
	}

	.rz-form__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Patterns set generous card padding for desktop. At phone width that can
	 * eat a quarter of the screen, so it is capped here. The patterns write
	 * their padding inline, which is why this needs !important.
	 */
	.rz-section .is-style-rz-card,
	.rz-section .is-style-rz-card-hover,
	.rz-section .is-style-rz-panel,
	.rz-section .is-style-rz-outline,
	.rz-section .is-style-rz-glass {
		padding-left: var(--wp--preset--spacing--30) !important;
		padding-right: var(--wp--preset--spacing--30) !important;
	}

	.is-style-rz-divided > * + * {
		border-inline-start: 0;
		border-top: 1px solid var(--wp--preset--color--line);
		padding-block-start: var(--wp--preset--spacing--30);
		padding-inline-start: 0;
	}

	.rz-on-dark .is-style-rz-divided > * + * {
		border-top-color: rgb(255 255 255 / 14%);
	}

	.is-style-rz-faq-item > summary {
		font-size: var(--wp--preset--font-size--medium);
	}

	.rz-step__index {
		font-size: var(--wp--preset--font-size--x-large);
	}

	.rz-footer__legal {
		gap: var(--wp--preset--spacing--20);
	}
}

/* --- Tablet: 600px to 1023px -------------------------------------- */

@media (min-width: 600px) and (max-width: 1023px) {
	.rz-form__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Two-up feels right here; three would squeeze the measure. */
	.rz-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* Columns that should stay side by side only from desktop up.
   Core stacks .wp-block-columns at 781px; these need to hold on longer. */
@media (max-width: 1023px) {
	.rz-hero__cols,
	.rz-contact__cols,
	.rz-feature-row,
	.rz-faq-split,
	.rz-with-sidebar,
	.rz-leader-row,
	.rz-case-feature {
		flex-wrap: wrap !important;
	}

	.rz-hero__cols > .wp-block-column,
	.rz-contact__cols > .wp-block-column,
	.rz-feature-row > .wp-block-column,
	.rz-faq-split > .wp-block-column,
	.rz-with-sidebar > .wp-block-column,
	.rz-leader-row > .wp-block-column,
	.rz-case-feature > .wp-block-column {
		flex-basis: 100% !important;
	}

	/* A leader portrait at full width would be absurd. */
	.rz-leader-row > .wp-block-column:first-child {
		max-width: 11rem;
	}

	.is-style-rz-sticky-aside {
		position: static !important;
	}
}

/* --- Desktop: 1024px and up --------------------------------------- */

/* A long checklist reads better in two columns once there is room for them. */
@media (min-width: 768px) {
	.rz-two-col {
		column-gap: var(--wp--preset--spacing--50);
		columns: 2;
	}

	.rz-two-col > li {
		break-inside: avoid;
	}
}

@media (min-width: 1024px) {
	/* Alternating rows: visual order flips, DOM order stays image-first
	   so the stacked mobile view reads correctly. */
	.rz-feature-row.is-flipped {
		flex-direction: row-reverse;
	}

	.is-style-rz-sticky-aside {
		position: sticky;
		top: calc(var(--wp--preset--spacing--40) + 4.5rem);
	}

	/* The connecting rule behind the process steps. */
	.rz-steps::before {
		background: linear-gradient(
			90deg,
			var(--wp--preset--color--line) 0%,
			var(--wp--preset--color--accent) 50%,
			var(--wp--preset--color--line) 100%
		);
		content: "";
		height: 2px;
		inset-inline: 7%;
		position: absolute;
		top: 1.25rem;
		z-index: 0;
	}

	.rz-hero.is-split .wp-block-column:first-child {
		padding-inline-end: var(--wp--preset--spacing--20);
	}

	.rz-form {
		--rz-field-col-gap: 2rem;
	}
}

/* --- Large screens: 1600px and up --------------------------------- */

@media (min-width: 1600px) {
	:root {
		/* Wide alignment grows, the reading measure deliberately does not. */
		--wp--style--global--wide-size: var(--wp--custom--layout--xl-wide-size);
		--rz-gutter: 5rem;
	}

	body {
		--wp--style--root--padding-left: 5rem;
		--wp--style--root--padding-right: 5rem;
	}

	.rz-hero.is-split .wp-block-column:first-child {
		padding-inline-end: var(--wp--preset--spacing--50);
	}

	.is-style-rz-sticky-aside {
		top: calc(var(--wp--preset--spacing--50) + 4.5rem);
	}
}

/* Very large screens: cap the hero art so it does not dominate. */
@media (min-width: 2000px) {
	.rz-hero.is-split .wp-block-image img {
		margin-inline-start: auto;
		max-width: 56rem;
	}
}

/* ------------------------------------------------------------------ *
 * 18. Reduced motion, forced colours, print
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	.rz-anim .is-style-rz-reveal,
	.rz-anim .is-style-rz-stagger > * {
		opacity: 1 !important;
		transform: none !important;
	}

	.is-style-rz-card-hover:hover {
		transform: none;
	}

	.is-style-rz-zoom:hover img,
	.is-style-rz-card-hover:hover .is-style-rz-zoom img {
		transform: none;
	}
}

@media (forced-colors: active) {
	.is-style-rz-card,
	.is-style-rz-card-hover,
	.is-style-rz-panel,
	.is-style-rz-outline,
	.rz-plan.is-featured {
		border: 1px solid CanvasText;
		box-shadow: none;
	}

	.rz-billing__btn.is-active {
		border: 2px solid CanvasText;
	}
}

@media print {
	.rz-header,
	.rz-footer,
	.rz-to-top,
	.rz-billing,
	.wp-block-navigation,
	.wp-block-search,
	.rz-form__actions {
		display: none !important;
	}

	.rz-section {
		padding-block: 1rem !important;
	}

	.is-style-rz-faq-item > :not(summary) {
		display: block !important;
	}

	a::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		word-break: break-all;
	}
}